<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>数组的常用方法</title>
     <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css'>
     <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
</head>
<body>
     <pre>
        <code>
            let arr = [12,23,34,45]
            console.log(typeof arr === 'object');
            /**
                * arry:{
                *      0:12,
                *      1:23,
                *      2:34,
                *      3:45,
                *      length:4
                * }
                * 数字作索引(KEY属性名)
                * length代表长度
                * 
                * arr[0]根据索引获取指定项内容
                * arr.length 获取数组长度
                * 
                * */
                console.dir(arr); 

                /**
                * 数组中常用的方法
                * 1、方法的作用和含义
                * 2、方法的实参
                * 3、方法的返回值
                * 4、原来数组是否发生改变
            */

            // 会修改原数组的方法 增删改
            // push() ==> 数组末尾增加值 ==> push返回的结果为数组长度
            let list = [1,2,3]
            let return_result = list.push(4)
            console.log('push[1,2,3]',list);
            console.log('push返回结果为最新的数组的长度',return_result);
            // unshift ==> 数组前面添加 ==> 同时返回新数组的长度
            let ar = [1,2,3]
            ar.unshift(0)
            console.log('unshift(0)的结果',ar);
            // shift() ==> 改变原数组(删除第一项) ==> 返回被删除的那一项
            let sub = [1,2,3]
            console.log('shift删除第一项返回的',sub.shift());
            console.log('shift删除之后删除原数组',sub);

            // pop() ==> 改变数组的最后一项 ==> 返回被删除一项
            let uw = [1,2,3,4,5]
            console.log('pop方法的返回值 -- 返回被删除的最后一项',uw.pop());
            console.log(uw);

            // 原生js删除末尾最后一项 可以直接把length - 1
            let uu = [1,2,3,4]
            console.log(uu.length = 3,'数组长度 - 1 删除末尾方法',uu); 

            // 基于原生js的delete 把数组当做普通对象 可以删除掉某一项 但是不会影响数组本身的结构 ==> 具体表现当前元素(数组->length)长度不会改变
            let sss = [1,2,3] 
            delete sss[0]
            console.log('通过delete改变之后的sss---数组长度不会变化',sss);

            // splice() ==> 实现数组的增加删除修改 == > splice(n,m)从索引n开始删除m长度的位置 如果不写长度默认删除到末尾 将删除的部分用新数组记录
            let resul = [1,2,3,5,6]
            console.log('使用splice删除的元素splice(n,m)',resul.splice(0,2)); // 1,2
            console.log('使用splice删之后的数组',resul);//[3,5,6]
            console.log('使用splice替换数据元素',resul.splice(0,1,1000)); // 3
            console.log(resul); // [1000,5,6]
            console.log('使用splice添加数据',resul.splice(0,0,2000)); // []
            console.log(resul); // [2000,1000,5,6]


            console.log('----------------------------------------不会改变原来的数组------------------------------------------------');
            /** ----------------------------------------不会改变原来的数组------------------------------------------------ **/
            // 不会改变原来的数组
            let res = [1,2,3,4]
            let _res = [10,...res]
            console.log("_res",_res,"res",res);
        </code>
     </pre>
     <script> hljs.highlightAll(); </script>
     <script>
        let arr = [12,23,34,45]
        console.log(typeof arr === 'object');
        /**
         * arry:{
         *      0:12,
         *      1:23,
         *      2:34,
         *      3:45,
         *      length:4
         * }
         * 数字作索引(KEY属性名)
         * length代表长度
         * 
         * arr[0]根据索引获取指定项内容
         * arr.length 获取数组长度
         * 
         * */
        console.dir(arr); 

        /**
         * 数组中常用的方法
         * 1、方法的作用和含义
         * 2、方法的实参
         * 3、方法的返回值
         * 4、原来数组是否发生改变
        */

        // 会修改原数组的方法 增删改
        // push() ==> 数组末尾增加值 ==> push返回的结果为数组长度
        let list = [1,2,3]
        let return_result = list.push(4)
        console.log('push[1,2,3]',list);
        console.log('push返回结果为最新的数组的长度',return_result);
        // unshift ==> 数组前面添加 ==> 同时返回新数组的长度
        let ar = [1,2,3]
        ar.unshift(0)
        console.log('unshift(0)的结果',ar);
        // shift() ==> 改变原数组(删除第一项) ==> 返回被删除的那一项
        let sub = [1,2,3]
        console.log('shift删除第一项返回的',sub.shift());
        console.log('shift删除之后删除原数组',sub);

        // pop() ==> 改变数组的最后一项 ==> 返回被删除一项
        let uw = [1,2,3,4,5]
        console.log('pop方法的返回值 -- 返回被删除的最后一项',uw.pop());
        console.log(uw);

        // 原生js删除末尾最后一项 可以直接把length - 1
        let uu = [1,2,3,4]
        console.log(uu.length = 3,'数组长度 - 1 删除末尾方法',uu); 

        // 基于原生js的delete 把数组当做普通对象 可以删除掉某一项 但是不会影响数组本身的结构 ==> 具体表现当前元素(数组->length)长度不会改变
        let sss = [1,2,3] 
        delete sss[0]
        console.log('通过delete改变之后的sss---数组长度不会变化',sss);

        // splice() ==> 实现数组的增加删除修改 == > splice(n,m)从索引n开始删除m长度的位置 如果不写长度默认删除到末尾 将删除的部分用新数组记录
        let resul = [1,2,3,5,6]
        console.log('使用splice删除的元素splice(n,m)',resul.splice(0,2)); // 1,2
        console.log('使用splice删之后的数组',resul);//[3,5,6]
        console.log('使用splice替换数据元素',resul.splice(0,1,1000)); // 3
        console.log(resul); // [1000,5,6]
        console.log('使用splice添加数据',resul.splice(0,0,2000)); // []
        console.log(resul); // [2000,1000,5,6]


        console.log('----------------------------------------不会改变原来的数组------------------------------------------------');
        /** ----------------------------------------不会改变原来的数组------------------------------------------------ **/
        // 不会改变原来的数组
        let res = [1,2,3,4]
        let _res = [10,...res]
        console.log("_res",_res,"res",res);
     </script>
</body>
</html>